<template>
  <q-page class="row justify-center" :padding="!$q.platform.is.mobile"> 
    <div class="col-xs-12 col-md-8">
      <q-list separator dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>观影活动</q-list-header>
        <q-collapsible group="faq" :opened="opened(1)"
            label="1. 关于观影活动的执行<b class='text-primary'>阶段</b>与<b class='text-primary'>状态</b>">
          <ul>
            <li><b class='text-primary'>报名阶段</b>：活动开始<b class='text-primary'>前4小时</b>，且尚未选定任何中奖用户时，活动处于报名阶段；</li>            
            <li><b class='text-primary'>筛选阶段</b>：活动开始<b class='text-primary'>前4小时</b>，并已上传豆瓣报名表或选定中奖用户时，活动处于筛选阶段；</li>
            <li><b class='text-primary'>签到阶段</b>：活动开始<b class='text-primary'>前4小时</b>至开始<b class='text-primary'>后1小时</b>，活动处于签到阶段；</li>
            <li><b class='text-primary'>统计阶段</b>：活动开始<b class='text-primary'>后1小时</b>至结束<b class='text-primary'>后7天</b>，项目处于统计阶段；</li>
            <li><b class='text-positive'>已结束状态</b>：活动结束<b class='text-primary'>后7天</b>，项目处于已结束状态；</li>
            <li><b class='text-blue'>缺数据状态</b>：主要指缺少<b class='text-blue'>中奖用户</b>名单（之前已完成的大部分活动都缺少这个信息，可在之后陆续补充）；</li>
          </ul>
        </q-collapsible>
        <q-collapsible group="faq" :opened="opened(2)"
            label="2. 关于观影活动各阶段的<b class='text-primary'>操作限制</b>">
          <ul>
            <li>活动进入<b class='text-primary'>统计阶段</b>或<b class='text-primary'>已结束状态</b>时，<b class='text-blue'>中奖用户名单</b>及<b class='text-blue'>签到结果</b>无法变更；</li>            
            <li>活动处于<b class='text-blue'>缺数据状态</b>时，可以进行<b class='text-blue'>一次且只有一次</b>中奖用户的添加操作；
                <small>(因为添加中奖用户后，活动可能进入统计阶段or已结束状态，此时中奖用户名单无法变更；因此请一次将所有用户信息全部导入。)</small></li>
          </ul>
        </q-collapsible>
        <q-collapsible group="faq" :opened="opened(3)"
            label="3. 关于<b class='text-primary'>豆瓣报名表</b>的说明">
          <ul>
            <li><b class='text-primary'>豆瓣报名表</b>指从豆瓣同城活动下载的报名用户Excel，如下图：<br/>
                <img src="statics/faq/event-excel.png" class="full-width">
            </li>   
            <li>请在活动报名页上传该报名表，尽量不要对该表进行任何修改，否则可能会导致上传失败；</li>
          </ul>
        </q-collapsible>
        <q-collapsible group="faq" :opened="opened(4)"
            label="4. 关于<b class='text-primary'>用户详情表</b>的说明">
          <ul>
            <li><b class='text-primary'>用户详情表</b>是在豆瓣报名表基础上，增加用户的各种统计数据后的结果表，为中奖用户的筛选提供便利；</li>   
            <li>可在上传豆瓣报名表后进行下载；<small>（区别于之前的系统，目前不是上传后自动进行下载，需要手动点击下载按钮进行下载）</small></li>
          </ul>
        </q-collapsible>
        <q-collapsible group="faq" :opened="opened(5)"
            label="5. 关于<b class='text-primary'>中奖用户表</b>的说明">
          <ul>
            <li><b class='text-primary'>中奖用户表</b>是指最终参与活动的豆瓣用户名单；</li>   
            <li>该表必须包含用户的<b class='text-primary'>豆瓣ID</b>数据，否则系统会忽略该用户；</li>
            <li>建议该表包含用户的<b class='text-primary'>手机号</b>数据，以便签到时进行验证；<small>（系统已记录了大部分用户的手机号，会自动进行匹配填充）</small></li>
            <li>上传的中奖用户表中，请<b class='text-primary'>删除未中奖的用户条目</b>，对于那些标黄、标红或者隐藏的数据，系统不会进行过滤；</li>
            <li>在<b class='text-primary'>豆瓣报名表</b>或<b class='text-primary'>用户详情表</b>的基础上，删除未中奖用户后，就是合格的中奖用户表；</li>
            <li>合格的中奖用户表示例：<br/>
              <img src="statics/faq/event-play.png" class="full-width">
            </li>
            <li>不合格的中奖用户表示例：<br/>
              <img src="statics/faq/event-play-invalid.png" class="full-width">
            </li>
          </ul>
        </q-collapsible>
        <q-list-header>辅助工具</q-list-header>  
        <q-collapsible group="faq" :opened="opened(6)"
            label="6. 关于盗梦Chrome插件的安装说明">
          <ul>
            <li>先<a href="statics/faq/paprika-chrome.zip">下载</a>盗梦辅助Chrome插件，并解压；</li>   
            <li>打开Chrome扩展程序设置页面，如下图；<br/>
              <img src="statics/faq/plugin1.png" class="full-width">
            </li>
            <li>打开<b class="text-primary">开发者模式</b>，然后选择<b class="text-secondary">加载已解压的扩展程序</b>，如下图；<br/>
              <img src="statics/faq/plugin2.png" class="full-width">
            </li>
            <li>选择刚刚下载并解压的插件文件夹，如下图；<br/>
              <img src="statics/faq/plugin3.png" class="full-width">
            </li>
            <li>正确选择后，插件会显示在页面中，如下图；<br/>
              <img src="statics/faq/plugin4.png" class="full-width">
            </li>
            <li>插件可以进行多个豆瓣账号的管理，如下图；<br/>
              <img src="statics/faq/plugin5.png" class="full-width">
            </li>
          </ul>
        </q-collapsible>  
        <q-collapsible group="faq" :opened="opened(7)"
            label="7. 短信发送提审过程说明">
          <ol>
            <li>登录<a href="https://account.aliyun.com/login/login.htm?oauth_callback=https%3A%2F%2Fdysms.console.aliyun.com%2Fdysms.htm%3Fspm%3D5176.12212976.aliyun_sidebar.aliyun_sidebar_dysms.39771cbeHLBKHL#/domestic/text/template">阿里云</a>管理系统；</li>   
            <li>在左侧菜单栏点击<b class="text-primary">【短信服务】</b>菜单，如下图；<br/>
              <img src="statics/faq/sms-code1.png" class="full-width">
            </li>
            <li>在短信服务页面，点击<b class="text-primary">【国内消息】菜单</b>，如下图；<br/>
              <img src="statics/faq/sms-code2.png" class="full-width">
            </li>
            <li>在国内消息页面，打开<b class="text-primary">【模板管理】菜单后</b>，点击【添加模板】按钮，如下图；<br/>
              <img src="statics/faq/sms-code3.png" class="full-width">
            </li>
            <li>填写相关内容后，点击<b class="text-primary">【提交】</b>按钮，如下图；<br/>
              <img src="statics/faq/sms-code4.jpg" class="full-width">
            </li>
            <li>成功提交模板后，会得到短信的模板CODE(用户短信发送)，形如：<b class="text-secondary">SMS_xxxxxx</b>，如下图；<br/>
              <img src="statics/faq/sms-code5.png" class="full-width">
            </li>
            <li>短信审核通过后，根据相应<b class="text-primary">模板CODE</b>，在盗梦管理后台建立短信发送条目即可。</li>
          </ol>
        </q-collapsible>    
      </q-list>
    </div>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndexFaq',
  mounted() {
    let me = this;
    this.$api.ui.pageTitle = '使用说明';
    this.$api.ui.pageBackBtn = function(){
      me.$router.go(-1);
    }
  },
  methods: {
    opened(idx) {
      if(this.$route.query.id) {
        return idx == (this.$route.query.id - 0);
      }
      return false;
    }
  }
}
</script>
